<template>
  <div>
    <el-card>
      <div slot="header">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>项目/建筑管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div>
        <el-row :gutter="20" class="topLayout">
          <el-input
            v-model="searchForm.search"
            placeholder="请输入关键字搜索"
            clearable
            class="input-search"
          ></el-input>
          <el-button type="primary" icon="el-icon-search" @click="getList(true)"
            >搜 索</el-button
          >
        </el-row>
      </div>
    </el-card>
    <el-card class="m-t m-b">
      <el-row type="flex" justify="start" class="m-b">
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="createProject"
          >创建项目</el-button
        >
        <!--<el-button type="default" size="small" icon="el-icon-download">下载项目</el-button>-->
      </el-row>
      <el-row>
        <el-table stripe :data="tableData" style="width: 100%" size="small">
          <!--<el-table-column type="selection" width="55"></el-table-column>-->
          <el-table-column
            type="index"
            label="编号"
            min-width="60"
            align="center"
            :index="table_index"
          ></el-table-column>
          <!--<el-table-column prop="projectId" label="项目ID" show-overflow-tooltip width="180"></el-table-column>-->
          <el-table-column
            prop="name"
            label="项目名称"
            min-width="200"
          ></el-table-column>
          <el-table-column prop="state" label="状态" min-width="120">
            <template #default="{ row }">
              <el-tag :type="row.state | stateFilter">{{ row.state | stateFil}}</el-tag>
            </template>
          </el-table-column>
          <!--<el-table-column
            prop="displayName"
            label="项目别名"
            min-width="200"
          ></el-table-column>-->
          <el-table-column
            prop="description"
            label="项目描述"
            min-width="220"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            :formatter="dateFormat"
            min-width="140"
          ></el-table-column>
          <el-table-column
            prop="updateTime"
            label="更新时间"
            :formatter="dateFormat"
            min-width="140"
          ></el-table-column>
          <el-table-column fixed="right" label="操作" width="220">
            <template slot-scope="scope">
              <el-tag type="primary" @click="handleClick(scope.row)" title="编辑">
                <i class="el-icon-edit"></i>
              </el-tag>
              <el-tag type="primary" @click="viewProject(scope.row)" title="查看项目">
                <i class="el-icon-view"></i>
              </el-tag>
              <el-tag type="warning" @click="disableProject(scope.row)" title="结束项目">
                <i class="el-icon-lock"></i>
              </el-tag>
              <el-tag type="danger" @click="deleteProject(scope.row)" title="删除项目">
                <i class="el-icon-delete"></i>
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <div class="pages-btn-box m-t">
        <el-pagination
          v-if="page.total > 0"
          :current-page="page.current"
          :page-size="Number(page.size)"
          layout="prev, pager, next, jumper"
          :total="page.total"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { formatDate } from "@/utils/utils";
import { search,disableProject,deleteProject } from "@/api/projectManage";
import store from "@/store/modules/user";
export default {
  name: "index",
  components: {},
  data() {
    return {
      searchForm: {},
      tableData: [],
      page: {
        current: 1,
        size: 10,
        total: 0,
      },
      formData: {},
      userInfo: store.state.userInfo,
    };
  },
  mounted() {
    if (this.$route.query.page) {
      this.page.current = Number(this.$route.query.page);
    }
    if (this.$route.query.search) {
      this.searchForm = JSON.parse(this.$route.query.search);
    }
    this.getList();
  },
  filters: {
    stateFil(val) {
      switch (val) {
        case "ACTIVE":
          return "正常";
        case "DISABLE":
          return "结束";
        default:
          break;
      }
    },
    stateFilter(state) {
      const stateMap = {
        ACTIVE: "",
        DISABLE: "danger"
      };
      return stateMap[state];
    }
  },
  methods: {
    table_index(index) {
      return (this.page.current - 1) * this.page.size + index + 1;
    },
    getList(refresh = false) {
      if (refresh) {
        this.page.current = 1;
        this.page.total = 0;
      }
      var data = {
        ...this.searchForm,
        pageNo: this.page.current,
        pageSize: this.page.size,
      };

      search(data).then((res) => {
        const resData = res.value;
        this.tableData = resData.values;
        this.page.total = resData.total;
      });
    },
    dateFormat(row, column) {
      if (column.property === "createTime") {
        return formatDate(new Date(row.createTime));
      } else if (column.property === "updateTime") {
        return formatDate(new Date(row.updateTime));
      }
    },
    handleClick(row) {
      //console.log(row);
      this.$router.push({
        path: "/projectManage/EditForm",
        query: {
          ...row,
          page: this.page.current,
          search: JSON.stringify(this.searchForm),
        },
      });
    },
    update(row) {
      //console.log(row);
      this.formData = row;
    },
    createProject() {
      this.$router.push({
        path: "/projectManage/EditForm",
        query: {
          page: this.page.current,
          search: JSON.stringify(this.searchForm),
        },
      });
    },
    disableProject(row) {
      this.$confirm("您确定要结束此项目吗？结束项目后该项目下所有设备将解除绑定。", "提示", {
        confirmButtonText: " 确 定",
        cancelButtonText: " 取 消",
        type: "warning",
        confirmButtonClass:"el-icon-check",
        cancelButtonClass:"el-icon-close btn-custom-cancel"
      }).then(() => {
        disableProject(row.projectId)
          .then((res) => {
            if (res["code"] == 200) {
              this.getList();
              this.$message.success("结束成功!");
            } else {
              this.$message(res["msg"]);
            }
          })
      });
    },
    deleteProject(row) {
      this.$confirm("您确定要删除此项目吗？", "提示", {
        confirmButtonText: " 确 定",
        cancelButtonText: " 取 消",
        type: "warning",
        confirmButtonClass:"el-icon-check",
        cancelButtonClass:"el-icon-close btn-custom-cancel"
      }).then(() => {
        const data = {
          projectId: row.projectId
        };
        deleteProject(data)
          .then((res) => {
            if (res["code"] == 200) {
              this.getList();
              this.$message.success("删除成功!");
            } else {
              this.$message(res["msg"]);
            }
          })
      });
    },
    handleCurrentChange(e) {
      this.page.current = e;
      this.getList();
    },
    viewProject(row) {
      this.$router.push({
        path: "/projectManage/viewProject",
        query: {
          projectId: row.projectId,
          page: this.page.current,
          search: JSON.stringify(this.searchForm),
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.topLayout {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.inline {
  // max-width: 300px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.input-search {
  width: 350px;
  min-width: 200px;
  margin-right: 20px;
}

.el-tag{
  margin-left: 10px;
}

.flexBox {
  display: flex;

  div {
    margin: 0 5px;
    border: 1px solid #aaa;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 5px;
    color: #aaa;
    cursor: pointer;
  }

  .selected {
    background-color: #1890ff;
    color: #fff;
  }
}
</style>
<style>
  .btn-custom-cancel {
    float: right;
    margin-left: 10px;
  }
</style>
